<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:shiro="shiro.apache.org/tags">
<head>
    <th:block th:include="common/common_head :: commonHeader('供应商录入关注物质')"/>
    <link rel="stylesheet" th:href="@{/static/js/plugins/jquery-layout/jquery.layout-latest.css}">
</head>
<body class="gray-bg">
<div class="container-div ui-layout-center">
    <div class="row">
        <div class="col-sm-12 search-condition">
            <form id="subVendorForm" th:action="@{/svhc/subVendorList}" class="form-inline">
                <div class="select-list">
                    <ul>

                        <li class="col-sm-3" shiro:hasPermission="substanceVendor:vendorName">
                            <label>供应商名称：</label>
                            <input type="text" name="vendorName" autocomplete="off"/>
                        </li>

                        <li class="col-sm-3">
                            <label>填写日期(起):</label>
                            <input type="text" name="startDate" id="startDate" autocomplete="off"/>
                        </li>

                        <li class="col-sm-3">
                            <label>填写日期(止):</label>
                            <input type="text" name="endDate" id="endDate" autocomplete="off"/>
                        </li>

                        <li class="col-sm-3">
                            <button id="subVendorSearchBtn" type="button" class="btn btn-primary btn-rounded btn-sm"><i
                                    class="fa fa-search"></i>&nbsp;搜索
                            </button>
                            <button class="btn btn-warning btn-rounded btn-sm" type="reset"><i class="fa fa-eraser"></i>&nbsp;重置
                            </button>

                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="col-sm-12 select-info order-table">
            <table id="subVendor" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div id="subVendorModal" style="display: none">
    <div class="modal-body">
        <table class="table table-bordered text-nowrap" id="svhc">
            <thead>
            <tr>
                <th>高度关注物质</th>
                <th>中文名称</th>
                <th>英文名称</th>
                <th>化学摘号</th>
                <th>是否含有</th>
                <th>物质含量(ppm)</th>
                <th>用途描述</th>
            </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

</div>


<!--shiro不能在js中动态生成-->
<div id="permissionDiv" style="display: none;">
    <a class="btn btn-outline btn-success btn-rounded" shiro:hasPermission="substanceVendor:edit">填写</a>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<script type="text/javascript" th:src="@{/static/js/plugins/jquery-layout/jquery.layout-latest.js}"></script>

<script type="text/javascript">

    $(function () {
        // 初始化时间插件
        laydate.render({elem: '#startDate'});
        laydate.render({elem: '#endDate'});
    });

    var searcherBS = Searcher.createBS('#subVendor',
        [
            {checkbox: true},
            {title: '新增清单日期', field: 'createDate'},
            {title: '供应商名称', field: 'vendorName'},
            {title: '填写日期', field: 'editDate'},
            {
                title: "操作", field: '',
                formatter: function (value, row, index) {
                    value = '';
                    //已经填写只能查看
                    if (row.editDate != undefined && row.editDate != null && row.editDate != '') {
                        return '<button class="btn btn-outline btn-success btn-rounded"  onclick="fun(\'' + row.svhcVendorHeadId + '\')">查看</button>';
                    }
                    //未填写，则显示填写按钮
                    $("#permissionDiv").find('a').each(function () {
                        $(this).attr("onclick", "edit('" + row.svhcHeadId + "')");
                        value += this.outerHTML;
                    })
                    return value;
                }
            }
        ]
    );

    /**
     * 查询数据
     */
    function refresh() {
        searcherBS.refresh();
    }

    /**
     * 关闭模态框
     */
    function closeDialog() {
        layer.closeAll();
    }

    /**
     * 供应商填写关注物质
     */
    function edit(svhcHeadId) {
        var index = Dialog.openUrl("", ctxPath + '/svhc/edit/' + svhcHeadId, {
            area: ['900px', '700px'],
            maxmin: true,
            end: function () {
            }
        });
        layer.full(index);
    }

    /**
     * 查看详情
     */
    function fun(svhcVendorHeadId) {
        $.ajax({
            type: "GET",
            url: ctxPath + '/svhc/findById/' + svhcVendorHeadId,
            contentType: "application/json;charsetset=UTF-8",//必须
            dataType: "json",//将JSONObj作为请求参数传递 ;
            cache: true,
            async: false,
            error: function (request) {
                showTipAlert("Connection error");
            },
            success: function (res) {
                var data = eval(res.result);
                var trCode = "";
                for (var item in data) {
                    trCode += "<tr>";
                    trCode += "<td >" + data[item].svhc + "</td>";
                    trCode += "<td >" + data[item].zhName + "</td>";
                    trCode += "<td >" + data[item].enName + "</td>";
                    trCode += "<td >" + data[item].casNo + "</td>";
                    let contain = "否";
                    if (data[item].contain == 1) {
                        contain = "是";
                    }
                    trCode += "<td >" + contain + "</td><td >";
                    if (data[item].ppm != undefined) {
                        trCode += data[item].ppm;
                    }
                    trCode += "</td><td >"
                    if (data[item].description != undefined) {
                        trCode += data[item].description;
                    }
                    trCode += "</td></tr>";
                }
                $("#svhc tbody").html("");
                $("#svhc tbody").append(trCode);
                Dialog.open("详情", $("#subVendorModal"), {area: ['1000px', '500px']});
            }
        });
    }

</script>

</body>
</html>